<template>
    <div class="TreeHeaderBtnWrap">
        <a-space class="TreeHeaderBtnWrap-space">
            <a-button type="link" @click="handClick('add')">新增</a-button>
            <a-button type="link" @click="handClick('options')">操作</a-button>
        </a-space>
        <a-modal v-model="visible" :title="`知识库菜单${type == 'add' ? '新增' : '操作'}`" @ok="handOk" @cancel="cancel">
            <a-form :form="form" v-if="type == 'add'">
                <a-form-item label="选择上级目录">
                    <a-tree-select v-decorator="['parentId', { rules: [{ required: true, message: '请选择上级目录' }] }]"
                        style="width: 100%" :treeData="tempTreeList" :replaceFields="replaceFields"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择上级目录" allow-clear
                        tree-default-expand-all>
                    </a-tree-select>
                </a-form-item>
                <a-form-item label="名称">
                    <a-input type="text"
                        v-decorator="['directoryName', { rules: [{ required: true, message: '请输入名称' }] }]"
                        placeholder="请输入名称" />
                </a-form-item>
            </a-form>
            <div class="optionsWrap" v-else>
                <a-tree :tree-data="treeList" :replaceFields="replaceFields" :blockNode="true" :loading="delLoading">
                    <template slot="title" slot-scope="item">
                        <div class="lineWrap">
                            <span>{{ item.name }}</span>
                            <a-space>
                                <a-popconfirm title="确定删除该数据?" ok-text="确定" cancel-text="取消" @confirm="remove(item)">
                                    <a-tooltip placement="top">
                                        <a-button class="deleteClass" type="link" :ghost="true"
                                            size="small">删除</a-button>
                                    </a-tooltip>
                                </a-popconfirm>
                            </a-space>
                        </div>
                    </template>
                </a-tree>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    name: 'TreeHeaderBtn',
    props: {
        onCallBack: {
            type: Function,
        },
        treeList: {
            type: [Object, Array],
            default: () => []
        },
        onTreeRefresh: {
            type: Function,
        },
    },
    data() {
        return {
            form: this.$form.createForm(this, { name: "coordinated" }),
            visible: false,
            replaceFields: { children: 'child', title: 'name', key: 'key', value: 'id' },
            type: '',
        }
    },
    mounted() {
    },
    methods: {
        cancel() {
            this.visible = false;
            this.form.resetFields();
        },
        handClick(t) {
            this.type = t;
            this.visible = true;
        },
        handOk() {
            if (this.type == 'add') {
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        let formData = values;
                        this.sendPost(formData);
                    }
                });
            } else {
                this.cancel();
            }
        },
        sendPost(aParams) {
            let t = this;
            let params = {
                ...aParams,
            }
            this.postAxios(this.$addDirectory, params,)
                .then((res) => {
                    if (res) {
                        t.$message.success({
                            content: res.msg || res.data,
                            duration: 2.5,
                        });
                        t.visible = false;
                        t.onCallBack();
                        t.onTreeRefresh();
                    }
                })
                .finally(() => {
                });
        },
        remove(i) {
            let params = {
                id: i.id,
            };
            this.delLoading = true;
            this.getAxios(this.$deleteDirectory, params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success(res.msg || res.data);
                        this.onCallBack();
                        this.onTreeRefresh();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(() => { })
                .finally(() => {
                    this.delLoading = false;
                });
        },
    },
    computed: {
        tempTreeList() {
            let res = JSON.parse(JSON.stringify(this.treeList));
            res.unshift({
                'id': ' ', 'parentId': '-1', 'name': '根目录'
            })
            return res
        }
    }
}
</script>
<style lang="less" scoped>
.TreeHeaderBtnWrap {
    width: 100%;
    height: 100%;

    &-space {
        width: 100%;
        justify-content: space-between;
    }
}

.optionsWrap {
    max-height: 45vh;
    overflow-y: auto;

    .lineWrap {
        display: flex;
        justify-content: space-between;

        .deleteClass {
            color: red;
        }
    }
}
</style>